<template>
  <div class="app-container">
      <el-form ref="cmContentRef" :model="form" :rules="rules" label-width="100px" :disabled="!isInsert && !isEdit">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属栏目" prop="categoryId">
              <el-tree-select
                  v-model="form.categoryId"
                  :data="categoryOptions"
                  :props="{ value: 'id', label: 'categoryTitle', children: 'children',disabled: false}"
                  value-key="id"
                  placeholder="请选择所属栏目"
                  check-strictly
                  default-expand-all
                  :disabled="disabledCategory"
                  @change="categoryChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="categoryId">
              <el-tree-select v-model="form.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly default-expand-all filterable :disabled="!checkPermi(['admin'])"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文章标题" prop="contentTitle">
              <el-input v-model="form.contentTitle" placeholder="请输入文章标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文章作者" prop="contentAuthor">
              <el-input v-model="form.contentAuthor" placeholder="请输入文章作者" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关键字" prop="contentKeyword">
              <el-input v-model="form.contentKeyword" placeholder="请输入关键字" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文章描述" prop="contentDescription">
              <el-input v-model="form.contentDescription" type="textarea" placeholder="请输入文章描述" :rows="8"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缩略图" prop="contentImg">
              <image-upload v-model="form.contentImg" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文章内容">
<!--              <FileUpload v-if="category.categoryType == 3" :limit="100" :file-type="['png', 'jpg', 'jpeg', 'gif','mp4','avi']" :file-size="100" v-model="form.contentDetails"/>-->
              <ImageUpload v-if="category.categoryType == 3" :limit="100" :file-size="10" v-model="form.contentDetails"/>
              <editor v-else v-model="form.contentDetails" :min-height="292" :disabled="!isInsert && !isEdit"/>
            </el-form-item>
          </el-col>
	        <el-col :span="24" v-if="form.categoryId === '37060081532000140'">
		        <el-form-item label="经纬度" prop="lat">
			        <el-input :placeholder="`经度：${form.lng || ''}  纬度：${form.lat || ''}`" readonly>
				        <template #append>
					        <TMapAddressSelect @confirm="confirmMapAddress" :lat="form.lat" :lng="form.lng">选择位置</TMapAddressSelect>
				        </template>
			        </el-input>
		        </el-form-item>
	        </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status" >
                <el-radio v-for="dict in sys_data_status" :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
<!--          <el-col :span="6">-->
<!--            <el-form-item label="排序" prop="sort">-->
<!--              <el-input-number v-model="form.sort" placeholder="请输入排序" :min="0"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="虚拟浏览量" prop="contentHitVirtual">
              <el-input-number v-model="form.contentHitVirtual" placeholder="请输入次数" :min="0"/>
            </el-form-item>
          </el-col>

          <el-col :span="6" v-if="!isInsert" >
            <el-form-item label="浏览量" prop="contentHit" >
              <el-input-number v-model="form.contentHit" placeholder="请输入次数" :min="0" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否推荐" prop="isRecommend">
          <el-radio-group v-model="form.isRecommend" >
            <el-radio v-for="dict in sys_yes_no" :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer" v-if="isEdit || isInsert" style="text-align: right;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script setup name="ContentForm">
import TMapAddressSelect from "@/components/TMapAddressSelect/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {checkPermi} from "@/utils/permission";
import useDeptStore from "@/store/modules/dept.js";
import ImageUpload from "@/components/ImageUpload/index.vue";


const { proxy } = getCurrentInstance();
const {  sys_data_status,sys_yes_no } = proxy.useDict('sys_data_status','sys_yes_no');

const deptStore = useDeptStore();

const props = defineProps({
  form:{
    type: Object,
    default: {}
  },
  isInsert:{
    type: Boolean,
    default: false
  },
  isEdit:{
    type: Boolean,
    default: false
  },
  disabledCategory:{
    type: Boolean,
    default: false
  },
  categoryOptions:{
    type: Array,
    default: []
  },
})

const data = reactive({
  rules: {
	  categoryId: [{ required: true, message: "所属栏目不能为空", trigger: "blur" }],
	  contentTitle: [{ required: true, message: "文章标题不能为空", trigger: "blur" }],
	  sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
  }
});

const { rules } = toRefs(data);

const emit = defineEmits(['cancel','submitForm','getList'])

const category = ref({})
const categoryMap = ref({})
watchEffect(() => {
	categoryMap.value = {}
	buildCategoryMap(props.categoryOptions);
	if (props.form.categoryId) {
		categoryChange(props.form.categoryId)
	}
})

function buildCategoryMap(options) {
	options.forEach(item => {
		categoryMap.value[item.id] = {
			id: item.id,
			categoryTitle: item.categoryTitle,
			categoryType: item.categoryType,
		}
		if (item.children && item.children.length){
			buildCategoryMap(item.children)
		}
	})
}

function categoryChange(e){
	const id = e || props.form.categoryId
	category.value = categoryMap.value[id];
}



// 取消按钮
function cancel() {
  emit('cancel');
}

/** 提交按钮 */
const cmContentRef = ref(null)
function submitForm() {
	cmContentRef.value.validate(valid => {
    if (valid) {
      emit('submitForm')
    }
  });
}


// 确定地点
const confirmMapAddress = function (address) {
	props.form.lat = address.lat;
	props.form.lng = address.lng;
};



const deptOptions = ref(undefined);
/** 查询部门下拉树结构 */
watchEffect(() => {
	deptOptions.value = deptStore.deptTree;
});

</script>
